<template>
  <!-- 二级类目的面包屑 -->
  <XtxBread>
    <XtxBreadItem to="/">首页</XtxBreadItem>
    <XtxBreadItem v-if="getList.top" :to="`/category/${getList.top.id}`">{{
      getList.top.name
    }}</XtxBreadItem>
    <Transition name="fare" mode="out-in">
      <XtxBreadItem
        :key="getList.sub.id"
        v-if="getList.sub"
        :to="`/category/sub/${getList.sub.id}`"
        >{{ getList.sub.name }}</XtxBreadItem
      >
    </Transition>
  </XtxBread>
</template>

<script>
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  name: "SubBread",
  setup() {
    // // 获取数据 vuex中的二级类目
    // const store = useStore()
    // const route = useRoute()
    // const getList = computed(()=>{
    //     const cate = {}
    //     store.state.category.list.forEach(top => {
    //     if(top.children){
    //         const sub = top.children.find(sub=>sub.id === route.params.id)
    //         if(sub){
    //             cate.top = {id:top.id,name:top.name}
    //             cate.sub = {id:sub.id,name:sub.name}
    //         }

    //     }

    // })
    //  return cate
    // })
    // return { getList }
    const store = useStore();
    const route = useRoute();
    // 找一级目录与二级目录 Vuex中找
    const getList = computed(() => {
        // 存储一级二级目录的数据，防止数据为空
        const cate = {}
         // top为一级目录
        store.state.category.list.forEach(top => {
            if(top.children){
                // 二级目录
                const sub = top.children.find(sub=>sub.id === route.params.id)
                if(sub){
                    cate.top = {id:top.id,name:top.name}
                    cate.sub = {id:sub.id,name:sub.name}
                }
            }
            
        })
         return cate
    })
   
   
     return {getList}
  },
  
};
</script>

<style lang="less">
.fare-enter-from,
.fare-leave-to {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
}
// 进入后,离开之前
.fare-enter-to,
.fare-leave-from {
  opacity: 1;
  transform: none;
}
// 进入过程中,离开过程中
.fare-enter-active,
.fare-leave-active {
  transition: all 0.5s;
}
</style>